<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二手订单管理</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }
        .transaction {
            border: 1px solid #ccc;
            padding: 16px;
            margin: 16px 0;
            border-radius: 8px;
            display: flex;
            align-items: center;
        }
        .transaction img {
            width: 400px;
            height: 300px;
            border-radius: 8px;
            margin-right: 16px;
        }
        .details {
            flex-grow: 1;
            margin-left:40px
        }
        .details h3 {
            margin: 0 0 8px 0;
        }
        .details p {
            margin: 4px 0;
        }
        .confirm-button {
            padding: 8px 16px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 100px;
            width:150px;
            height:40px;
            font-size: 18px;
            letter-spacing: 3px;

        }
    </style>
</head>
<body>
<div class="container">
    <h1>二手订单管理</h1>
    <div id="transactions"></div>
</div>

<script>

    const token = localStorage.getItem('adminToken');

    document.addEventListener('DOMContentLoaded', function () {
        fetchTransactions();
    });

    function fetchTransactions() {
        fetch('http://localhost:8080/admin/getHouseTransaction?type=0', {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    displayTransactions(data.data);
                } else {
                    alert('Failed to fetch transactions');
                }
            })
            .catch(error => {
                console.error('Error fetching transactions:', error);
            });
    }

    function displayTransactions(transactions) {
        const transactionsContainer = document.getElementById('transactions');
        transactionsContainer.innerHTML = '';

        transactions.forEach(transaction => {
            const transactionElement = document.createElement('div');
            transactionElement.className = 'transaction';

            const imgElement = document.createElement('img');
            imgElement.src = transaction.imageUrl;

            const detailsElement = document.createElement('div');
            detailsElement.className = 'details';
            detailsElement.innerHTML = `
                <h3>${transaction.title}</h3>
                <p>购买者: ${transaction.userName}</p>
                <p>描述: ${transaction.description}</p>
                <p>房屋类型: ${transaction.houseType}</p>
                <p>价格: ${transaction.price} 元</p>
                <p>面积: ${transaction.area} 平方米</p>
                <p>意向金额: ${transaction.amount} 元</p>
                <p>意向日期: ${new Date(transaction.transactionDate).toLocaleString()}</p>
            `;

            const buttonElement = document.createElement('button');
            buttonElement.className = 'confirm-button';
            buttonElement.textContent = '确认卖出';
            buttonElement.onclick = () => confirmTransaction(transaction.transactionId);

            transactionElement.appendChild(imgElement);
            transactionElement.appendChild(detailsElement);
            transactionElement.appendChild(buttonElement);

            transactionsContainer.appendChild(transactionElement);
        });
    }
    function confirmTransaction(transactionId) {
        if (confirm('您确定要确认卖出该交易吗？')) {
            fetch(`http://localhost:8080/admin/agreeTransaction?transactionId=${transactionId}`, {
                method: 'PUT',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 1) {
                        alert('Transaction confirmed successfully');
                        fetchTransactions(); // Refresh the transactions list
                    } else {
                        alert('Failed to confirm transaction');
                    }
                })
                .catch(error => {
                    console.error('Error confirming transaction:', error);
                });
        }
    }

</script>
</body>
</html>
